<template>
  <div class="calendar flex-1">
    <TitleHeader title="日历" event-name="添加事件" @add="addCalendar" />
    <Calendar v-if="calendarMap.size > 0" />
    <Dialog v-model:visible="visible">
      <el-form label-position="top" label-width="100px" :model="calendar">
        <el-form-item label="事件名称">
          <el-input v-model="calendar.name" />
        </el-form-item>
        <el-form-item label="事件类别">
          <el-select v-model="calendar.type" class="m-2" placeholder="选择类别">
            <el-option v-for="item in 3" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件级别">
          <el-select v-model="calendar.level" class="m-2" placeholder="选择级别">
            <el-option v-for="item in ['低', '中', '高']" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <div class="time">
          <div>
            <span>日期</span>
            <el-date-picker v-model="calendar.date" type="date" placeholder="Pick a day" />
          </div>
          <div>
            <span>时间</span>
            <el-time-picker v-model="calendar.time" arrow-control placeholder="Arbitrary time" />
          </div>
        </div>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="calendar.descript" :autosize="{ minRows: 5, maxRows: 10 }" />
        </el-form-item>
        <el-form-item>
          <div class="repeat">
            <span>重复事件</span>
            <el-switch v-model="calendar.repeat" size="large" />
          </div>
        </el-form-item>
      </el-form>
      <el-form>
        <el-collapse v-model="calendar.repeat" @change="handleChange" :accordion="true">
          <el-collapse-item :name="true">
            <div class="item">
              <span>完成这个任务</span>
              <el-button-group class="ml-4">
                <el-button type="primary">日常的</el-button>
                <el-button type="primary">每周</el-button>
                <el-button type="primary">每月</el-button>
              </el-button-group>
            </div>
            <div class="item">
              <span>重复日期</span>
              <el-button-group class="ml-4">
                <el-button type="primary">周一</el-button>
                <el-button type="primary">周二</el-button>
                <el-button type="primary">周三</el-button>
                <el-button type="primary">周四</el-button>
                <el-button type="primary">周五</el-button>
                <el-button type="primary">周六</el-button>
                <el-button type="primary">周日</el-button>
              </el-button-group>
            </div>
            <el-checkbox label="每天重复" size="large" />
            <div class="last_time">
              <span>时间</span>
              <el-time-picker placeholder="Arbitrary time" />
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="addCalendar1">
          保存事件
        </el-button>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import TitleHeader from '@/components/titleHeader/index.vue';
import Calendar from '@/components/calendar/index.vue';
import Dialog from '@/components/dialog/index.vue';
import { ref, onMounted, provide } from 'vue'
import { ICalendar } from '@/types/calendar';
import { getCalendarApi } from '@/api/calendarApi';

const calendarArr = ref<ICalendar[]>([])
const calendarMap = ref<Map<string, ICalendar[]>>(new Map())

provide("calendarMap", calendarMap)

const calendar = ref<ICalendar>({
  name: "",
  userId: "1",
  id: "1",
  type: "",
  level: "",
  date: "",
  time: "",
  descript: "",
  repeat: false,
  isUp: false,
})

onMounted(() => {

  getCalendarApi({ year: "", sun: "", month: "" }).then(res => {
    calendarArr.value = res.data;
    ArrToMap()
  })
})

// 将数组转换成map
function ArrToMap() {
  calendarArr.value.forEach((item) => {
    // const item = Object.freeze(item1);
    if (calendarMap.value.get(item.date)) {
      const arr = calendarMap.value.get(item.date)
      arr!.push(item)
    } else {
      calendarMap.value.set(item.date, [item])
    }
  })

}

function handleChange() {
  console.log(123);

}

const visible = ref(false);

function addCalendar() {
  visible.value = true;
}

function addCalendar1() {

}


</script>


<style lang="scss" scoped>
.calendar {
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 30px;

  :deep(.header) {
    margin-top: 30px;
  }

  :deep(.el-form) {
    width: 100%;
    padding: 10px 30px;
    box-sizing: border-box;

    .el-form-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .el-input {
      height: 45px;
    }

    .el-select {
      width: 100%;
    }


  }

  :deep(.el-collapse) {
    border: 0;
    text-align: left;

    .el-collapse-item__header {
      display: none;
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 10px;
      width: 100%;

      .el-button-group {
        width: 100%;
        display: flex;
        gap: 2px;
        justify-content: space-evenly;
        align-items: center;

        .el-button {
          padding-right: 0;
          padding-left: 0;
          flex: 1;
        }
      }


    }

    .last_time {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      text-align: left;
      gap: 4px;

      .el-input {
        width: 100%;
      }
    }
  }



  .time {
    display: flex;
    gap: 20px;

    >div {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-start;
    }
  }

  .repeat {
    width: 100%;
    padding: 18px 20px;
    border-radius: 10px;
    color: black;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba($color: #0097e6, $alpha: .1);


  }

}
</style>